<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{name}}
			
			
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					name:'王炎霸'
				},
				methods:{
					show:function (){
						console.log("执行了show方法");
					}
				},
				beforeCreate:function(){
					console.log("beforeCreate");
					console.log("name:"+this.name);
					this.show();
				},
				created:function(){
					console.log('createed');
					console.log("name:"+this.name);
					this.show();
				},
				beforeMount:function(){
					console.log("模板已经编译完成，但是尚未将模板渲染到页面中");
					var n = document.getElementById("app").innerText;
					console.log(n);
				},
				mounted:function(){
					console.log("真实挂载到页面中");
					var n = document.getElementById("app").innerText;
					console.log(n);
				},
				beforeUpdate:function(){
					console.log("数据改变之后才会执行");
					var n = document.getElementById("app").innerText;
					console.log(n);
				},
				updated:function(){
					console.log("页面和data数据已经保持同步");
					var n = document.getElementById("app").innerText;
					console.log(n);
				}
			});
		</script>
	</body>
</html>
